/**
 * @author wn
 * @date 2022/07/11 10:14:33
 * @description: 登陆  表单验证--不合规则提示错误信息  插件--VeeValidate
 *
 * 官方更新比较快   所以在此指定 版本号  指定写法  失去焦点自动校验
 * 1 npm i vee-validate@4.0.3
 * 2 import { Form ,Field } from 'vee-validate'
 *  注册这辆组件 -- components: { Form, Field },
 *  Form 替换 form   Field 替换表单元素--input
 *
 * 3 Field  必须有 name='account'  用来指定 校验规则函数的
 * name--Filed--schema--errors
 * 4 Field 需要进行数据绑定
 * 5 编码 name 指定的 校验规则函数
 * Form--:validation-schema="schema" 接收校验规则  为对象(正确 error)
 *  const schema = {
 *   规则  返回 true 成功  返回  String  失败--error 提示
 *   v 即为绑定 数据
 *   account(v){},
 *   password(v){}
 * }
 *
 * Form 中  作用域插槽  v-slot={ errors }
 * errors.account--正确 schema 返回 true-- errors 空
 *
 * Field 替换自定义组件   as="xtx-check-box" 该组件需要支持 v-model
 *
 * 自定义组件不支持 v-model
 * 需要自定义  :XXXXX=""  @change=""    子组件必须是 change事件
 * 模拟v-model   注意组件初始化 和  点击事件的 触发
 * 参考 XtxCity    AddressEdit
 *
 * v-show 不会销毁组件  所以切换时 会遗留之前的 错误UI
 * Form 带有 resetForm()方法 清除 errors
 * ref 绑定在 元素上获取 DOM
 * ref 绑定在 组件上 获取实例
 *
 * 登陆按钮 需要对 表单进行整体校验
 * validate   返回 promise  then(v=>v   v 为 true 校验成功)
 *
 * 对单行 field 进行验证  且 提示 错误信息
 * 1 校验 手机号正确  true  失败-->String String也是true ===
 * const mobileResult = schema.mobile(form.mobile)
 * if (mobileResult === true) {
 *
 * }else{
 *  校验失败  errors 提示
 * Form组件 setFieldError(哪个name,错误信息)触发 v-slot="{ errors }.mobile
 *
 * target.value.setFieldError('mobile', mobileResult)
 *
 * }
 *
 *
 *
 */
